<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="set">设置cookie</button>
    <button class="get">获取cookie</button>
</body>
<script>

    // 如何存储cookie?  (对应键名存储,没有就新增,有就修改)
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回
    // (4) cookie可以设置过期时间,和存储路径

    // cookie的时效性:
    // 默认情况下,存储的cookie在浏览器关闭时会过期,并被删除;如果想自定义过期时间,需要对cookie设置 expires属性(expires接收一个日期格式的字符串 => 世界时 (中国标准时间 - 8h))
    // date.toString()    日期对象转字符串(中国标准时间)
    // date.toUTCString()  日期对象转字符串(世界时)

    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];

    /* setBtn.onclick = function(){
        console.log("存储cookie");

        // 默认浏览器关闭过期
        document.cookie = "user=a123123";
        document.cookie = "pwd=123123";
        document.cookie = "phone=17386141517";
        document.cookie = "email=123123@qq.com";

    } */


    setBtn.onclick = function(){
        console.log("存储cookie");


        var date = new Date(); 
        date.setDate(date.getDate() + 7);  // 7天后过期
        // date.setMinutes(date.getMinutes() + 30); //30分钟
        // date.setSeconds(date.getSeconds() + 30*60); //30分钟
        // date.setSeconds(date.getSeconds() + 10); //30分钟

        // console.log(date,typeof date);
        // console.log(date.toString(), typeof date.toString()); // 日期对象转字符串(中国标准时间)
        // console.log(date.toUTCString(), typeof date.toUTCString()); //   日期对象转字符串(世界时)

        // 7天后过期
        document.cookie = "user=a123123; expires=" + date.toUTCString();
        document.cookie = "pwd=123123; expires=" + date.toUTCString();
        document.cookie = "phone=17386141517;expires=" + date.toUTCString();
        document.cookie = "email=123123@qq.com; expires=" + date.toUTCString();;

    }
    

    // cookie之跨页面访问:
    // cookie存储的位置默认和当前文件所在的目录绑定, 该目录,以及子目录下的文件,均可以访问cookie, 如果想设置cookie的存储路径,需要配置path属性(path属性需要以 站点根目录开头 /)


    setBtn.onclick = function(){
        console.log("存储cookie");


        var date = new Date(); 
        date.setDate(date.getDate() + 7);  // 7天后过期

        //  7天后过期  cookie存储在 /day25
        // document.cookie = "user=a123123; expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "pwd=123123; expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "email=123123@qq.com; expires=" + date.toUTCString() + "; path=/day25";

         //  7天后过期  cookie存储在站点根目录下 /
         document.cookie = "user=a123123; expires=" + date.toUTCString() + "; path=/";
        document.cookie = "pwd=123123; expires=" + date.toUTCString() + "; path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/";
        document.cookie = "email=123123@qq.com; expires=" + date.toUTCString() + "; path=/";

    }

</script>
</html>